<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 500px;
				margin: 0 auto;
				text-align: center;
				padding: 20px;
				background-color: #FF4500;
			}
			#box>div{
				margin-bottom: 20px;
			}
			table{
				width: 500px;
				margin: 20px 0;
				background-color: white;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="d0">
				<input type="search" name="" class="search" value="" />
				<button type="button" onclick="searchFn()">搜索</button>
			</div>
			<div class="d1">
				姓名：<input type="text" name=""  id="user" value=""/>
			</div>
			<div class="d2">
				密码：<input type="password" name=""  id="password" value=""/>
			</div>
			<div class="d3">
				性别：
				<input type="radio" name="sex" id="man" value="1"/>男<label for=""></label>
				<input type="radio" name="sex" id="woman" value="2"/>女<label for=""></label>
			</div>
			<div>
				阶段：
				<select class="sel">
					<option >p1</option>
					<option >p2</option>
					<option >p3</option>
				</select>
			</div>
			<button type="button" class="btn">提交</button>
			<table border="1" cellspacing="0" cellpadding="0">
				<thead>
					<tr>
						<td>序号</td>
						<td>姓名</td>
						<td>密码</td>
						<td>性别</td>
						<td>阶段</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<!-- <tr>
						<td>${arr[i].user}</td>
						<td>${arr[i].password}</td>
						<td>${getsexFn(arr[i].sex)}</td>
						<td>
							<button type="button" onclick="xg(${arr[i].id})">修改</button>
							<button type="button" onclick="del(${arr[i].id})">删除</button>
						</td>
					</tr> -->
				</tbody>
			</table>
			<div class="d4">
				<button type="button" onclick="delAll()">全部删除</button>
				<button type="button" onclick="bs(this)">隔行变色</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var user=document.querySelector("#user");
		var password=document.querySelector("#password");
		var sexs=document.querySelectorAll(".d3>input[type='radio']");
		var btn=document.querySelector(".btn");
		var tbody =document.querySelector("tbody");
		var sel = document.querySelector(".sel")
		var search = document.querySelector(".search")
		
		/* 声明本地存储 */
		if (localStorage.Inf) {
			var arr=JSON.parse(localStorage.Inf);
			show(arr)
		} else{
			var arr=[];
			localStorage.Inf = JSON.stringify(arr)
		}
		/* 点击添加 */
		btn.onclick = function(){
			var obj={
				user:user.value,
				password:password.value,
				sex:getsexV(),
				jd:sel.value,
				id:+new Date()
			}
			arr.push(obj);
			localStorage.Inf=JSON.stringify(arr);
			show(arr)
			user.value=password.value=""
		}
		/* 获取单选值 */
		function getsexV(){
			for(var i=0;i<sexs.length;i++){
				if (sexs[i].checked) {
					return sexs[i].value
				}
			}
		}
		/* 输出中文 */
		function getsexFn(value){
			return value=="1"?"男":"女"
		}
		/* 渲染数据 */
		function show(arr){
			tbody.innerHTML=""
			for(var i=0;i<arr.length;i++){
				tbody.innerHTML+=`
				    <tr>
					    <td>${i+1}</td>
				    	<td>${arr[i].user}</td>
				    	<td>${arr[i].password}</td>
				    	<td>${getsexFn(arr[i].sex)}</td>
						<td>${arr[i].jd}</td>
				    	<td>
						    <button type="button" onclick="move(${arr[i].id},this)">上移</button>
				    		<button type="button" onclick="xg(${arr[i].id},this)">修改</button>
				    		<button type="button" onclick="del(${arr[i].id})">删除</button>
							<button type="button" onclick="move(${arr[i].id},this)">下移</button>
				    	</td>
				    </tr>
				`;
			}
		}
		/* 删除数据 */
		function del(id){
			for(var i=0;i<arr.length;i++){
				if(arr[i].id==id){
					arr.splice(i,1)
				}
			}
			localStorage.Inf = JSON.stringify(arr);
			show(arr)
		}
		/* 修改数据 */
		function xg(id,t){
			if (t.innerHTML=="修改") {
				t.innerHTML="完成"
				for(var i=0;i<arr.length;i++){
					if(arr[i].id==id){
						user.value = arr[i].user;
						password.value = arr[i].password
					}
				}
			} else{
				t.innerHTML="修改";
				for(var i=0;i<arr.length;i++){
					if (arr[i].id==id) {
						arr[i].user = user.value;
						arr[i].password = password.value
					}
				}
			localStorage.Inf = JSON.stringify(arr)
			show(arr)
			}
		}
		/* 上下移动 */
		function move(id,t){
			for(var i=0;i<arr.length;i++){
				if (t.innerHTML=="上移" && i!=0) {
					var c = arr[i];
					arr[i] = arr[i-1];
					arr[i-1] = c;
				} else if(t.innerHTML == "下移" && i!=arr.length-1){
					var c = arr[i];
					arr[i] = arr[i+1];
					arr[i+1] = c;
				}
			}
			localStorage.Inf = JSON.stringify(arr);
			show(arr)
		}
		// 全部删除
		function delAll(){
			arr = []
			localStorage.Inf = JSON.stringify(arr)
			show(arr)
		}
		/* 隔行变色 */
		function bs(t){
			var trs = document.querySelectorAll("table>tbody>tr")
			if (t.innerHTML == "隔行变色") {
				t.innerHTML = "关闭变色"
				for(var i=0;i<trs.length;i++){
					if(i%2==0){
					   trs[i].style.background="yellow"
					   /* trs[i].style.color="white" */
					}
				}
			} else{
				t.innerHTML="隔行变色";
				for(var i=0;i<trs.length;i++){
					trs[i].style.background=""
					trs[i].style.color="black"
				}
			}
	
		}
		/* 搜索内容 */
		function searchFn(){
			/* console.log(1) */
			var nr = document.querySelectorAll("table>tbody>tr");
			if(!search.value){
				show(arr);
				alert("请输入内容！");
				return false;
			}
			for(i=0;i<arr.length;i++){
				if(arr[i].user == search.value){
					nr[i].style.background = "red";
					nr[i].style.color = "white"
				}
			}
		}
		/* 按下回车键 */
		search.onkeydown = function(e){
			if(e.keyCode == 13){
				searchFn();
			}
		}
	</script>
</html>
